<template>
    <view class="app-user">
        <view class="user-area" :style="{'height': all_height + 'rpx'}">
            <view :style="areaStyle">
                <view class="mode-2" v-if="data.bg_style == 1 && data.mode == 2" :style="{'background-color': data.bg_color}">
                    <view class="mode-2-top" :style="{'background-color': data.bg_color,'height': bg_height - 32 + 'rpx'}"></view>
                    <view class="mode-2-radius" :style="{'background': 'radial-gradient(64rpx at right bottom,transparent 50%,' + data.bg_color +' 50%)','top': bg_height - 32 + 'rpx','left': '0'}"></view>
                    <view class="mode-2-radius" :style="{'background': 'radial-gradient(64rpx at left bottom,transparent 50%,' + data.bg_color +' 50%)','top': bg_height - 32 + 'rpx', 'right': '0'}"></view>
                </view>
                <view class="mode-3" v-if="data.bg_style == 1 && data.mode == 3" :style="{'height': bg_height + 'rpx'}">
                    <view :style="{'background-color': data.bg_color}"></view>
                </view>
                <view :class="data.top_style == 2 ? 'dir-top-nowrap cross-center':'dir-left-nowrap cross-center'" class="user-info" :style="userStyle">
                    <view class="user-avatar" :style="avatarStyle">
                        <image :src="avatar"></image>
                        <image v-if="is_vip_card_user && is_icon_super_vip == 1" src="/static/image/vip_icon.png" class="vip_icon" :style="vipIconStyle"></image>

                        <!--#ifdef MP-WEIXIN -->
                        <button class="update" scope="userInfo"  @click="getUserInfoClick" v-if="canIUseGetUserProfile" ></button>
                        <button class="update" open-type="getUserInfo" scope="userInfo" @getAuthorize="getUserInfo" @getuserinfo="getUserInfo" v-else></button>
                        <!-- #endif-->
                        <!--#ifdef H5 -->
                        <button class="update" @click="getUserInfo" v-if="isWechat"></button>
                        <!-- #endif-->
                    </view>
                    <view class="user-card" v-if="userInfo">
                        <view :class="data.top_style == 2 ? 'main-center cross-center' : 'dir-left-nowrap cross-center'">
                            <view class="user-name" :style="{'color': data.nickname_color, fontSize: `${data.nickname_size}rpx`}">
                                  {{userInfo.nickname}}</view>
                            <image @click="router('/plugins/teller/index/index')" class="user-code-icon" v-if="data.code == 1" :src="data.code_pic"></image>
                            <image @click="router('/pages/address/address')" v-if="data.address && data.address.status == 1 && data.address.mode == 2" class="user-code-icon" :src="data.address.pic_url"></image>
                        </view>
                        <view v-if="mall.setting.is_icon_members_grade == 1" :class="data.top_style == 2 ? 'dir-top-nowrap main-center cross-center':'dir-left-nowrap'">
                            <view @click="router('/pages/member/index/index')" class="member-info">
                                <image :src="userInfo && userInfo.identity && userInfo.identity.member_pic_url ? userInfo.identity.member_pic_url : data.member_pic_url"></image>
                                <view>{{userInfo && userInfo.identity ? userInfo.identity.level_name : data.general_user_text}}</view>
                            </view>
                        </view>
                    </view>
                    <template v-else>
                        <app-form-id>
                            <view :class="data.login_style != 2 ? 'login-btn' :'login-btn login-text'" @click="callLogin" :style="loginStyle">立即登录</view>
                        </app-form-id>
                    </template>
                    <view @click="router('/pages/address/address')" class="address-icon main-center cross-center" v-if="userInfo && data.address && data.address.status == 1 && data.address.mode == 1 && data.top_style == 3" :style="addressStyle">
                        <image v-if="data.address.style == 1" class="user-code-icon" :src="data.address.pic_url"></image>
                        <view :style="{'color': data.address.text_color}">收货地址</view>
                    </view>
                </view>
                <view @click="router('/pages/address/address')" class="address-icon main-center cross-center" v-if="data.address && data.address.status == 1 && data.address.mode == 1 && data.top_style != 3" :style="addressStyle">
                    <image v-if="data.address.style == 1" class="user-code-icon" :src="data.address.pic_url"></image>
                    <view :style="{'color': data.address.text_color}">收货地址</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
    export default {
        name: "app-user",
        props: {
            value: Object,
            bg: Object,
            nav: [Number,String]
        },
        data() {
            return {
                navHeight: 0,
                bg_height: 0,
                img_height: 0,
                user_height: 0,
                data: {}
            }
        },
        computed: {
            ...mapState({
                mall: state => state.mallConfig.mall,
                is_icon_super_vip: function (state) {
                    return state.mallConfig.mall.setting.is_icon_super_vip;
                },
                is_vip_card_user: function(state) {
                    return state.user.info && state.user.info.is_vip_card_user ? 1 : 0;
                }
            }),
            ...mapGetters({
                userInfo: 'user/info',
            }),
            // #ifdef H5
            isWechat: function() {
                return this.$jwx.isWechat();
            },
            // #endif
            canIUseGetUserProfile() {
                return this.$user.canIUseGetUserProfile();
            },
            isLogin() {
                return this.$user.isLogin();
            },
            avatar() {
                if (this.isLogin && this.userInfo) {
                    return this.userInfo.avatar;
                } else {
                    return '/static/image/user-default-avatar.png';
                }
            },
            all_height() {
                this.navHeight = this.nav;
                // #ifdef H5
                if(!this.isWechat) {
                    this.navHeight = 128;
                }
                // #endif
                let otherHeight = 176 - this.navHeight;
                this.bg_height = this.data.bg_height - otherHeight;
                this.img_height = this.data.img_height - otherHeight;
                let height = this.data.bg_style == 1 ? this.bg_height : this.img_height;
                height = Math.max(height,200 + this.navHeight);
                let domHeight = +this.user_height;
                let style = this.data.top_style;
                let avatar = this.data.top_size;
                console.log(this.bg_height,this.img_height,height)
                if(this.data.top_margin > 0) {
                    domHeight = +this.user_height + +this.data.top_margin + +this.navHeight
                }
                if(this.data.top_style == 3) {
                    domHeight += 20;
                }
                if(+domHeight > height) {
                    height = domHeight
                }
                if(this.data.address && this.data.address.status == 1 && this.data.address.mode == 1) {
                    let addressHeight = +this.data.address.top_margin + +this.navHeight + 56;
                    if(+addressHeight > height) {
                        height = addressHeight
                    }
                }
                return height
            },
            areaStyle() {
                let style = ''  
                if(this.data.bg_style == 1) {
                    style += `height: ${this.bg_height}rpx;width:100%;`;
                    if(this.data.mode == 1) {
                        style += `background-color: ${this.data.bg_color};`
                    }
                }else if(this.data.bg_style == '2') {
                    style += `background-image: url("${this.data.top_pic_url}");height: ${this.img_height}rpx;background-size: 100%;background-position: bottom center;`;
                }
                return style;
            },
            avatarStyle() {
                let style = `border-radius: 50%;height: ${this.data.top_size}rpx;width: ${this.data.top_size}rpx;`
                if(this.data.top_style != 2) {
                    style += `margin-right: 25rpx;`
                }
                if(this.data.top_style != 3) {
                    let border_color = this.is_vip_card_user && this.is_icon_super_vip == 1 ? '#ffe993' : '#ffffff'
                    style += `border: 4rpx solid ${border_color};`
                }
                return style;
            },
            vipIconStyle() {
                let rate = this.data.top_size / 100 > 1 ? 1 : this.data.top_size / 100;
                let top = this.data.top_style == 3 ? 57/2*rate - 4 : 57/2*rate;
                let right = this.data.top_style == 3 ? 29*rate - 4 : 29*rate
                let style = `width: ${58*rate}rpx;height: ${57*rate}rpx;top: -${top}rpx;right: -${right}rpx;`;
                return style;
            },
            updateText() {
                let style = `height: ${this.data.top_size *27.5/67.5}rpx;`;
                let fontSize = 32;
                if(this.data.top_size < 100) {
                    fontSize = 24;
                }else if(this.data.top_size > 140) {
                    fontSize = 40;
                }
                style += `font-size: ${fontSize}rpx;`
                return style;
            },
            userStyle() {
                let cardHeight = this.data.top_size + 40 > 176 ? this.data.top_size + 40 : 176;
                if(this.data.address && this.data.address.status == 1 && this.data.address.mode == 1) {
                    let addressHeight = +this.data.address.top_margin + 56;
                    if(+addressHeight > cardHeight) {
                        cardHeight = addressHeight
                    }
                }
                this.user_height = this.data.top_style == 1 ? this.data.top_size + 8 : this.data.top_style == 3 ? cardHeight : this.data.top_size + 110 > 164 ? this.data.top_size + 110 : 164;
                let style = `height: ${this.user_height}rpx;padding: 0 24rpx 10rpx;top: ${this.data.top_margin + +this.navHeight}rpx;`;
                if(this.data.top_style == 3) {
                    style += `width: 702rpx;background-color: ${this.data.card_color};border-radius: 8rpx;left: 24rpx;box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);`
                }
                return style;
            },
            loginStyle() {
                let style = `color: ${this.data.nickname_color};border-color: ${this.data.nickname_color};`
                if(this.data.login_style == 2) {
                    style += `border-color: transparent;`
                    if(this.data.top_style == 2) {
                        style += `text-align: center;`
                    }
                }else {
                    if(this.data.top_style == 2) {
                        style += `margin-top: 26rpx;`
                    }
                    if(this.data.login_style == 3) {
                        style += `background-color: ${this.data.nickname_color};color: ${this.data.login_color ? this.data.login_color : '#353535'};`
                    }
                }
                return style;
            },
            addressStyle() {
                if(!this.data.address){
                    return '';
                }
                let top = this.data.top_style == 3 ? 0 : this.navHeight
                let style = `background-color: ${this.data.address.bg_color};top: ${this.data.address.top_margin + top}rpx;`
                if(this.data.address.border == 1) {
                    style += `border: 1rpx solid ${this.data.address.border_color};border-right-width: 0;`
                }
                return style;
            }
        },
        created() {
            this.data = JSON.parse(JSON.stringify(this.value));
        },
        methods: {
            router(url) {
                uni.navigateTo({
                    url: url
                });
            },
            callLogin() {
                this.$store.dispatch('user/accessToken');
            },
            getUserInfoClick(userInfoResult) {
                this.$user.getUserProfile(userInfoResult).then(e => {
                    this.getUserInfo(e);
                }).catch(e => {
                    console.log(e)
                })
            },
            getUserInfo(userInfoResult) {
                // #ifdef MP
                let _this = this;
                uni.login({
                    scopes: 'auth_user',
                    success(loginResult) {
                        console.log(loginResult)
                        const data = {
                            encryptedData: userInfoResult.detail.encryptedData,
                            iv: userInfoResult.detail.iv,
                            rawData: userInfoResult.detail.rawData,
                            signature: userInfoResult.detail.signature,
                            code: loginResult.code,
                        };
                        _this.$request({
                            url: _this.$api.passport.login,
                            method: 'post',
                            data: data
                        }).then(response => {
                            uni.hideLoading();
                            if (response.code === 0) {
                                uni.showToast({
                                    title: '资料已更新',
                                    icon: 'none'
                                });
                                _this.$storage.setStorageSync('_USER_ACCESS_TOKEN', response.data.access_token);
                            } else {
                                return reject(response.msg);
                            }
                        });
                    }
                });
                // #endif
                // #ifdef H5
                this.$request({
                    url: this.$api.registered.url,
                    method: 'get',
                    data: {
                        scope: 'snsapi_userinfo',
                        response_type: 'code',
                        url: `${window.location.href}`
                    }
                }).then(res => {
                    if (res.code === 0) {
                        this.$storage.setStorageSync('_USER_SIGN', true);
                        window.location.replace(res.data.url);
                    } else {
                        uni.navigateTo({
                            url: '/pages/registered/sign'
                        });
                    }
                });
                // #endif
            }
        }
    }
</script>

<style scoped lang="scss">
    .app-user {
        .login-btn {
            display: inline-block;
            height: 70rpx;
            line-height: 66rpx;
            text-align: center;
            width: 200rpx;
            border-radius: 35rpx;
            border: 2rpx solid;
            font-size: 36rpx;
        }
        .login-text {
            font-size: 40rpx;
            line-height: 70rpx;
            text-align: left;
        }
        .user-area {
            background-color: transparent;
            position: relative;
            z-index: 3;
            .mode-2 {
                .mode-2-top {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                }
                .mode-2-radius {
                    position: absolute;
                    width: 32rpx;
                    height: 32rpx;
                }
            }
            .mode-3 {
                position: absolute;
                left: 0;
                width: 100%;
                top: 0;
                overflow: hidden;
                view {
                    position: absolute;
                    z-index: 2;
                    bottom: 0;
                    width: 4000rpx;
                    height: 4000rpx;
                    border-radius: 50%;
                    left: 50%;
                    margin-left: -2000rpx;
                }
            }
            .user-info {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                z-index: 3;
                .user-name {
                    max-width: 320rpx;
                    font-size: 40rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .user-avatar {
                    position: relative;
                    .vip_icon {
                        position: absolute;
                    }
                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                    .update {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 100;
                        background-color: rgba(0,0,0,0);
                    }
                }
                .member-info {
                    height: 32rpx;
                    line-height: 32rpx;
                    border-radius: 16rpx;
                    background-color: rgba(0,0,0,.25);
                    color: #fff;
                    font-size: 24rpx;
                    width: auto;
                    display: inline-block;
                    position: relative;
                    margin-top: 8rpx;
                    view {
                        padding: 0 12rpx 0 36rpx;
                    }
                    image {
                        width: 32rpx;
                        height: 32rpx;
                        position: absolute;
                        left: 0;
                        top: 0;
                        border-radius: 50%;
                        z-index: 3;
                    }
                }
            }
            .user-code-icon {
                width: 36rpx;
                height: 36rpx;
                margin-left: 8rpx;
            }
            .address-icon {
                position: absolute;
                right: 0;
                top: 0;
                height: 56rpx;
                font-size: 28rpx;
                border-radius: 28rpx 0 0 28rpx;
                padding: 0 10rpx 0 20rpx;
                z-index: 3;
                .user-code-icon {
                    margin-right: 8rpx;
                    max-width: 28rpx;
                    height: 28rpx;
                }
            }
        }
    }
</style>